<template>
  <div class="menuLeft">
    <el-menu collapse-transition background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router>
      <template v-for="item in this.menuData">
        <el-submenu v-if="item.ChildMenus.length > 0" :key="item.MenuId" :index="item.MenuId.toString()">
          <template slot="title">
            <i v-bind:class="item.Icon"></i>
            <span>{{ item.MenuName }}</span>
          </template>
          <MenuTree :menuData="item.ChildMenus"></MenuTree>
        </el-submenu>
        <el-menu-item v-else :key="item.MenuId" :index="item.Url">
          <i :class="item.Icon"></i>
          <span slot="title">{{ item.MenuName }}</span>
        </el-menu-item>
      </template>
    </el-menu>
    <!-- <ul>
          <template v-for="(item,index) in this.menuData">
              <div v-if="item.childMenus" :key="index">
                  <template  >
                      <span class="MenuNav">{{item.menuName}}</span>
                  </template>
                  <MenuTree :menuData="item.childMenus" />
              </div>
              <div v-else :key="index" >
                  <span>{{item.menuName}}</span>
              </div>
          </template>
      </ul> -->
  </div>
</template>

<script>
export default {
  name: 'MenuTree',
  data () {
    return {}
  },
  props: ['menuData'],  //子组件接收 父组的数据
  components: {},
}
</script>

<style scoped >
.MenuNav {
  height: 40px;
  line-height: 40px;
  text-align: left;
  padding-left: 20px;
  border-bottom: 1px solid rgb(203, 203, 203);
  color: black;
  font-size: 14px;
  font-family: "宋体";
}
</style>
